<template>
    <div class="parameter-editor table-content">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" width="800px" isFooter>
            <template #content>
                <div class="info">
                    <div class="left">
                        <div class="img">
                            <img :src="componentRef.component && getIcons(componentRef.component.name)" />
                        </div>
                    </div>
                    <div class="center">
                        <div class="value-item">
                            <span class="label">名称:</span>
                            <!-- <pui-input v-model="componentRef.componentParameterData.name" type="input"></pui-input> -->
                            <input class="pui-input" type="text" readonly v-model="componentRef.componentParameterData.name"/>
                        </div>
                        <div class="value-item">
                            <span class="label">ID:</span>
                            <!-- <pui-input v-model="componentRef.componentParameterData.id" type="input"></pui-input> -->
                            <input class="pui-input" type="text" readonly v-model="componentRef.component.componentId"/>
                        </div>
                        <div class="value-item">
                            <span class="label">坐标:</span>
                            <!-- <pui-input v-model="componentRef.componentParameterData.point" type="input"></pui-input> -->
                            <input class="pui-input" type="text" readonly v-model="componentRef.componentParameterData.point"/>
                        </div>
                    </div>
                    <div class="right">
                        <span class="label">描述信息:</span>
                        <div class="textarea">
                            <textarea type="textarea" readonly placeholder="请输入" v-model="componentRef.component.description" />
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="list-head item">
                        <!-- <span class="index">序号</span> -->
                        <span class="name">参数名称</span>
                        <span class="condition">条件</span>
                        <span class="value">值</span>
                        <span class="min">最小值</span>
                        <span class="max">最大值</span>
                        <span class="default">默认值</span>
                        <span class="class">数据类型</span>
                        <span class="unit">单位</span>
                        <!-- <span class="type">Type</span> -->
                    </div>
                    <div class="category-list">
                        <div class="category-item" v-for="category in categoryList">
                            <div class="title">{{ category.category }}</div>
                            <div class="item" v-for="(item, i) in category.parameters" :key="i">
                                <!-- <span class="index">{{i >= 9 ? '' : '0'}}{{i + 1}}</span> -->
                                <span class="name">{{item.name || '-'}}</span>
                                <span class="condition">{{item.condition || '-'}}</span>
                                <span class="value ellipsis-1" v-if="!item.showValueEdit" @dblclick="item.showValueEdit = true">{{item.value && Number(item.value) || '-'}}</span>
                                <span class="value" v-else><input class="pui-input" type="text" v-model="item.value"/></span>
                                <span class="min">{{item.min || '-'}}</span>
                                <span class="max">{{item.max || '-'}}</span>
                                <span class="default">{{item.default || '-'}}</span>
                                <span class="class">{{item.dataType || '-'}}</span>
                                <span class="unit">{{item.unit || '-'}}</span>
                                <!-- <span class="type">{{item.type || '-'}}</span> -->
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <!-- <pui-button>应用</pui-button> -->
                <pui-button type="primary" @click="submit">确定</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'ParameterEditor'
})
</script>
<script lang="ts" setup>
import { nextTick, reactive, ref, getCurrentInstance } from 'vue'
import { graphManager } from '@/services/phot_client/graph'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '参数编制器'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const categoryList: any = ref([])
const componentRef = reactive({
    dialogVisible: false,
    nodeRender: {} as any,
    component: {} as any,
    componentParameterData: {
        name: '',
        id: '',
        point: '',
        mark: ''
    },
    categoryList: []
}) as any
const getIcons = (name: any) => {
    try {
        const icon = require(`@/assets/icons/components/${name}.svg`)
        return icon
    } catch {
        return require(`@/assets/icons/unknown.svg`)
    }
}
const init = async (e: any) => {
    // console.log(graphManager.logicCore)
    if (!e && !graphManager.logicCore?.recentSelectedLogicObject) return
    if (!e && graphManager.logicCore?.recentSelectedLogicObject) {
        e = graphManager.logicCore?.recentSelectedLogicObject
    }
    // const parameters = await graphManager.getGraphParameters()
    // const components = await graphManager.getComponents()
    const component = await graphManager.getComponent(e.id)
    // component.categoryList = []
    const parameters: any = []
    for (const category in component.parameters) {
        const list = component.parameters[category]
        list.map((item: any) => {
            item.showValueEdit = false
        })
        parameters.push({
            category,
            parameters: list
        })
    }
    categoryList.value = parameters
    console.log(component.categoryList)
    componentRef.component = component
    componentRef.nodeRender = e.node
    componentRef.componentParameterData.name = component.name
    componentRef.componentParameterData.id = component.componentId
    componentRef.componentParameterData.point = e.rect.pos.x + ', ' + e.rect.pos.y
    await nextTick()
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
}
const submit = async () => {
    try {
        proxy.$loading.open()
        const parameters: any = {}
        categoryList.value.map((cate: any) => {
            cate.parameters.map((parameter: any) => {
                delete parameter.showValueEdit
            })
            parameters[cate.category] = cate.parameters
        })
        componentRef.component.parameters = parameters
        console.log(componentRef.component)
        await graphManager.alterComponent(componentRef.component)
        proxy.$loading.close()
        closeDialog()
    } catch (error) {
        proxy.$loading.close()
        proxy.$toast({
            value: '系统错误，请稍后尝试',
            type: 'error'
        })
        // closeDialog()
    }
}
defineExpose({
    init
})
</script>